<template>
    <div class="order-index" >
        <div >
            <div class="top-bar">
                <van-tabs :active="active" v-on:change="onChange" title-active-color="#00ac88" color="#00ac88">
                    <van-tab title="全部" ></van-tab>
                    <van-tab title="待支付" ></van-tab>
                    <van-tab title="待发货" ></van-tab>
                    <van-tab title="待收货" ></van-tab>
                    <van-tab title="退款/售后" ></van-tab>
                </van-tabs>
            </div>
            
            <div  class="list plr15 pt50 mb50">
                <ClList 
                    :loading="loading"
                    :finished="finished"
                    finishedText="没有更多了"
                    :list="list">
                    <div class="item fs-14" v-for="(item, i) in list" :key="i" >
                        <div class="kitbox-mid ptb13">
                            <div class="c-333 flex1">山水谈庄1</div>
                            <div class="c-03a885">待支付</div>
                        </div>
                        <div class="kitbox">
                            <div class="photo"><img src="/static/images/wd-bg.png" alt=""></div>
                            <div class="flex1 fs-14 pl15 lh20">
                                <div class="c-333">山水谈套餐1</div>
                                <div class="c-999 fs-13">规格01</div>
                                <div class="c-5b5b5b fs-14">￥199.00</div>
                            </div>
                        </div>
                        <!-- <template> -->
                            <div>
                                <div v-for="i in 3" :key="i" class="row fs-12 kitbox-mid">
                                    <div class="label  c-333">房间1密码</div>
                                    <div class="c-888">123456</div>
                                </div>
                            </div>
                            <div class="btn-group tr pt10 pb14">
                                <div><van-button color="#0daf7d" size="small" block plain round type="default">联系客服</van-button></div>
                                <div><van-button color="#0daf7d" size="small" block round type="default">确认收货</van-button></div>
                            </div>
                        <!-- </template> -->
                        <template v-if="false">
                            <div class="btn-group tr pt10 pb14">
                                <div><van-button color="#0daf7d" size="small" block plain round type="default">取消订单</van-button></div>
                                <div><van-button color="#0daf7d" size="small" block round type="default">立即支付</van-button></div>
                            </div>
                        </template>
                    </div>
                </ClList>
            </div>
        </div>
        
    </div>
</template>

<script>
import orderApi from "@/api/api-order";
import otherApi from "@/api/api-other";
import ClList from "@/components/ClList"
import moment from '@/plugins/utils/moment.js'
export default {
    name: "orderIndex",
    components: {
        ClList,
    },
    data(){
        return {
            list: [{}, {}],
            loading: false,
            finished: false,
            pageIndex: 0,
            pageSize: 20,
            remark: "",
            tempModel: {},
            show: false,
            cardId: "",
            active: 0

        }
    },
    watch: {
        
    },
    onShow(){
        // if(wx.getStorageSync("pageReload")==1){
        //     wx.removeStorageSync("pageReload")
        //     this.ListOrder(true)
        // }
    },
    onLoad(option){
        // this.cardId = option.cardId || ""
    },
    mounted() {
        // this.ListOrder(true)
    },
    methods: {
        onChange(e){

        },
        ListOrder(isReload){
            var vm = this
            if(isReload){
                this.pageIndex = 1
                this.finished = false
            } else {
                this.pageIndex++
            }
            this.loading = true
            orderApi.ListOrder({
                start_date: this.startDateStr || "",
                end_date: this.endDateStr || "",
                cardId: this.cardId || "",
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(res => {
                res = res.result
                this.finished = res.IsLastPage
                this.loading = false
                // if(res.List){
                //     res.List.forEach(v => {
                //         v.express_fee_str = v.express_fee.toFixed(2)
                //         v.money_str = v.money.toFixed(2)
                //         v.fact_paid_str = v.fact_paid.toFixed(2)
                //     });
                // }
                
                if(isReload){
                    this.list = res.List || []
                } else {
                    this.list = this.list.concat(res.List || [])
                }
            })
        },
        onConfirm(event) {
            this.startDate = event.mp.detail
            this.startDateStr = moment(event.mp.detail).format('YYYY-MM-DD')
            this.ListOrder(true)
            this.dateShow = false
        },
        getSysInfo() {
            const res = wx.getSystemInfoSync()
            return res
        },
        onEndConfirm(event) {
            this.endDate = event.mp.detail
            this.endDateStr = moment(event.mp.detail).format('YYYY-MM-DD')
            this.ListOrder(true)
            this.endDateShow = false
        },
        pay(item){
            var vm = this
            wx.showLoading({
                title: '提交中',
            })

            orderApi.PayOrder({
                orderId: item.orderId
            }).then(res => {
                wx.hideLoading({})
                if(res.code == 0){
                    res = res.result
                    wx.requestPayment({
                        timeStamp: res.timeStamp,
                        nonceStr: res.nonceStr,
                        package: res.package,
                        signType: res.signType,
                        paySign: res.paySign,
                        success (data) { 
                            wx.showToast({
                                title: '支付成功',
                                icon: 'success',
                                duration: 2000
                            })
                            vm.ListOrder(true)
                        },
                        fail (res) { 
                            wx.showToast({
                                title: '支付失败',
                                icon: 'none',
                                duration: 2000
                            })
                        }
                    })
                } 
            }).catch(e => {
                wx.hideLoading({})
                wx.showToast({
                    title: '重新支付失败',
                    icon: 'none',
                    duration: 2000
                })
            })
        }
    }
};
</script>
<style lang="scss" scope>
@import './css/index.scss';
</style>
